Unverankerte Aktionsschaltfläche hinzufügen

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen zum Hinzufügen von Komponenten in Compose

Eine unverankerte Aktionsschaltfläche (Floating Action Button, FAB) ist eine runde Schaltfläche, die die primäre Aktion in der Benutzeroberfläche Ihrer App auslöst. Auf dieser Seite erfahren Sie, wie Sie die FAB Ihrem Layout hinzufügen, ihr Aussehen anpassen und auf das Tippen auf die Schaltfläche reagieren.

Weitere Informationen zum Entwerfen einer schwebenden Aktionsschaltfläche in Ihrer App gemäß den Material Design-Richtlinien finden Sie unter Schaltflächen: Unverankerte Aktionsschaltfläche.

Abbildung 1. Eine unverankerte Aktionsschaltfläche

Unverankerte Aktionsschaltfläche in das Layout einfügen

Im folgenden Code wird gezeigt, wie die FloatingActionButton in Ihrer Layoutdatei aussehen sollte:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Standardmäßig wird die Farbe des Floating Action Button durch das Attribut colorAccent bestimmt. Sie können es mit der Farbpalette des Designs anpassen.

Andere FAB-Eigenschaften können Sie entweder mit XML-Attributen oder entsprechenden Methoden konfigurieren, z. B.:

  • Die Größe des FAB mit dem Attribut app:fabSize oder der Methode setSize().
  • Die Farbe der Wellenbewegung des FAB mit dem Attribut app:rippleColor oder der Methode setRippleColor()
  • Das Symbol für die Floating Action Button mit dem Attribut android:src oder der Methode setImageDrawable()

Auf Tastendruck reagieren

Anschließend können Sie eine View.OnClickListener anwenden, um das Tippen auf das Floating Action-Button zu verarbeiten. Im folgenden Code wird beispielsweise ein Snackbar angezeigt, wenn der Nutzer auf die FAB tippt:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Weitere Informationen zu den Funktionen des Floating Action Button finden Sie in der API-Referenz für die FloatingActionButton.